<script setup lang="ts">
import {type Component, computed, reactive, watch} from "vue";
import {useGlobalStore} from "@/stores/modules/global";
import {LayoutType} from "@/interface";
import LayoutVertical from './LayoutVertical/index.vue'
import LayoutClassic from "./LayoutClassic/index.vue";
import LayoutTransverse from "./LayoutTransverse/index.vue";
import LayoutColumns from "./LayoutColumns/index.vue";


const LayoutComponents: Record<LayoutType, Component> = {
  vertical: LayoutVertical,
  classic: LayoutClassic,
  transverse: LayoutTransverse,
  columns: LayoutColumns
};

const globalStore = useGlobalStore();

// 暗黑模式
const isDark = computed(() => globalStore.isDark)
const layout = computed(() => globalStore.layout)
const watermark = computed(() => globalStore.watermark);

const font = reactive({color: "rgba(0, 0, 0, .15)"});

watch(isDark, () => (font.color = isDark.value ? "rgba(255, 255, 255, .15)" : "rgba(0, 0, 0, .15)"), {
  immediate: true
})
</script>

<template>
  <el-watermark id="watermark" :font="font" :content="watermark ? ['Owl-Admin', '>_<>'] : ''">
    <component :is="LayoutComponents[layout]"></component>
  </el-watermark>
</template>

<style scoped lang="scss">
.layout {
  min-width: 600px;
}
</style>
